import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import numeral from 'numeral';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Tabs,
  Table,
  Tooltip,
  Spin,
} from 'antd';
import GeneralTableComponent from 'components/GeneralTableComponent';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import {
  ChartCard,
  yuan,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from 'components/Charts';

import styles from './conversionDetail.less';

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const { Option } = Select;

@connect(({ conversionGeneral, loading }) => ({
  conversionGeneral,
  loading: loading.models.conversionGeneral,
}))
@Form.create()
export default class conversionGeneral extends PureComponent {
  state = {
    listParam: {
      pageNo: 1,
      pageSize: 10,
      startTime: '',
      endTime: '',
      source: '',
    },
  };

  componentDidMount() {
    this.getGeneralTableData();
  }

  getGeneralTableData = () => {
    const { dispatch } = this.props;
    let { listParam } = this.state;
    let postParam = {};
    for (let [key, val] of Object.entries(listParam)) {
      if (val) {
        postParam[key] = val;
      }
    }
    dispatch({
      type: 'conversionGeneral/fetchGetConversionGeneralListForExternal',
      payload:{
        ...postParam
      }
    });
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { listParam } = this.state;
    listParam.pageNo = pagination.current;
    this.getGeneralTableData();
  };

  handleSelectChange = (val) => {
    let { listParam } = this.state;
    switch(val) {
      case 'all':
        listParam.source = '';
        break;
      case 'up':
        // listParam.source = 'sdfz';
        // break;
      case 'xbeauty':
        // listParam.source = '想美';
        // break;
      case 'xflower':
        listParam.source = val;
        break;
      default:
        break;
    }
    listParam.pageNo = 1;
    this.getGeneralTableData();
  };

  handleDateChange = (dates, dateStrings) => {
    let { listParam } = this.state;
    listParam.startTime = dates[0] ? dates[0].format('YYYY-MM-DD HH:mm:ss') : '';
    listParam.endTime = dates[1] ? dates[1].format('YYYY-MM-DD HH:mm:ss') : '';
    listParam.pageNo = 1;
    this.getGeneralTableData();
  };

  render() {
    const { conversionGeneral: { conversionGeneralData }, loading} = this.props;

    //表头初始化
    const tableColumns = [
      {
        title: '序号',
        dataIndex: 'userId',
        key: 'userId',
        render: (text, record, index) => {
          return <span>{index + 1 + ( conversionGeneralData.pagination.current - 1 ) * conversionGeneralData.pagination.size}</span>
        }
      },
      {
        title: '产品来源',
        dataIndex: 'source',
        key: 'source',
        render: val => `${val === '/' ? '全部' : ( val === 'up' ? 'sdfz' : val )}`,
        // render: val => `${val === '/' ? '全部' : ( val === 'up' ? 'sdfz' : ( val === 'xbeauty' ? '想美' : ( val === 'xflower' ? '信花花' : val ) ) )}`,
      },
      {
        title: '日期',
        dataIndex: 'date',
        key: 'date',
        render: val => `${val}`
      },
      {
        title: '入单数量',
        dataIndex: 'passCount',
        key: 'passCount',
        render: val => `${val}`
      },
      {
        title: '成功数量',
        dataIndex: 'withdrawSuccessCount',
        key: 'withdrawSuccessCount',
        render: val => `${val}`
      },
      {
        title: '转化率',
        dataIndex: 'withdrawConversion',
        key: 'withdrawConversion',
        render: val => `${val}`
      },
    ];

    return (
      <PageHeaderLayout title="数据概况">
        <Card bordered={false}>
          <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{marginBottom: 20}}>
            <Col md={10} sm={12}>
              <span>产品来源: </span>
              <Select defaultValue="all" style={{width: 120}} onChange={this.handleSelectChange}>
                <Option value="all">全部</Option>
                <Option value="up">sdfz</Option>
                {/* <Option value="xflower">信花花</Option>
                <Option value="xbeauty">想美</Option> */}
              </Select>
            </Col>
            <Col md={6} sm={24} />
            <Col md={8} sm={24}>
              <RangePicker
                ranges={{
                  近7天: [moment().subtract(7, 'days'), moment()],
                  近14天: [moment().subtract(14, 'days'), moment()],
                  近30天: [moment().subtract(30, 'days'), moment()],
                }}
                onChange={this.handleDateChange}
              />
            </Col>
          </Row>

          <GeneralTableComponent
            loading={loading}
            data={conversionGeneralData}
            columns={tableColumns}
            onChange={this.handleStandardTableChange}
            rowKey={'date'}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}
